<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <script>
            $(function(){
                let w = $('div').width();
                let h = $('div').height();

                console.log('宽',w)
                console.log('高',h);


                let innerW = $('div').innerWidth();
                let innerH = $('div').innerHeight();

                console.log('innerW',innerW)
                console.log('innerH',innerH);


                let outW = $('div').outerWidth();
                let outH = $('div').outerHeight();

                console.log('outW',outW)
                console.log('outH',outH);
				
				
				
				$("#btn").click(function(){
					
					// let offset = $("div").offset();
					// console.log("offset",offset);
					
					let {top,left} =  $("div").offset();
					console.log("top",top)
					console.log("left",left)
					
				})
				
				
				$("#btnSet").click(function(){
					 let {top,left} = $("div").offset();
					 $("div").offset({"top":top+2,"left":left+2});
				})
				
            })


        </script>
        <style>
            div{
                box-sizing: border-box;  /** 边框是算作宽高的一部分**/
                /* box-sizing: content-box; */  /** 边框是+宽高是实际的 宽高**/
                border: solid 5px red;
                height: 200px;
                width: 400px;
				position: absolute;
				top: 200px;
				left: 100px;
            }    

        </style>
    </head>
    <body>

		<button id="btn">获取偏移量</button>
		<button id="btnSet">设置偏移量</button>

        <div >

        </div>


    </body>
</html>
